<template>
  <el-dialog
    v-el-drag-dialog
    title="安检单详情"
    :visible.sync="visible"
    width="1024px"
    @closed="reset"
  >
    <div class="detail">
      <div class="section">
        <div class="title" style="margin-top: 0;">
          <span class="title-icon" />
          <span class="title-text">安检信息</span>
        </div>
        <el-descriptions size="medium">
          <el-descriptions-item label="安检单号">{{ detail.checkId }}</el-descriptions-item>
          <el-descriptions-item label="安检类型">{{ detail.checkType === 1 ? '随单安检' : '定期安检' }}</el-descriptions-item>
          <el-descriptions-item label="安检地址">{{ (detail.provinceName || '') + (detail.cityName || '') + (detail.countryName || '') + (detail.csmAddress || '') }}</el-descriptions-item>
          <el-descriptions-item label="安检人">{{ detail.checkUser }}</el-descriptions-item>
          <el-descriptions-item label="责任机构">{{ detail.orgName }}</el-descriptions-item>
          <el-descriptions-item label="安检时间">{{ detail.checkDt ? moment(detail.checkDt).format('YYYY-MM-DD HH:mm:ss') : '' }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{ detail.remark }}</el-descriptions-item>
        </el-descriptions>
        <div class="content">
          <div v-for="(item, index) in getBillList(detail.billItemList)" :key="index" class="ctn_item">
            <p>{{ NumberToChinese(index + 1) }}、{{ item.itemName }}</p>
            <template v-for="(sub,idx) in item.subList">
              <p v-if="sub.itemType === 1" :key="idx"><svg-icon icon-class="radio" /><span>{{ sub.itemDetailName }}</span></p>
            </template>
            <template v-for="(sub,idx) in item.subList">
              <p v-if="sub.itemType === 3" :key="idx"><svg-icon icon-class="checkbox" /><span>{{ sub.itemDetailName }}</span></p>
            </template>
            <template v-for="(sub,idx) in item.subList">
              <p v-if="sub.itemType === 5" :key="idx" style="margin-left: 10px;"><span>{{ sub.itemDetailName }}</span></p>
            </template>
          </div>
        </div>
      </div>
      <div v-if="detail.imageName" class="section">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">安检拍照</span>
        </div>
        <div v-if="images.length > 0" class="img">
          <img :src="imgBaseUrl + images[0]" alt="安检拍照">
        </div>
      </div>
      <div class="section">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">客户签字</span>
        </div>
        <div class="img">
          <img :src="imgBaseUrl + detail.cmSignPict" alt="客户签字">
        </div>
      </div>
      <div v-if="tableData.length !== 0" class="section">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">整改内容</span>
        </div>
        <div class="table">
          <table>
            <tr>
              <th>序号</th>
              <th>整改项</th>
              <th>隐患级别</th>
            </tr>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ item.itemName }}&emsp;&emsp;{{ item.itemDetailName }}</td>
              <td>{{ getWarnLevelTip(item.warnLevel, warnLevelMap) }}</td>
            </tr>
          </table>
        </div>
      </div>
      <div v-for="(item, index) in traceRecord" :key="index">
        <div class="title">
          <span class="title-icon" />
          <span class="title-text">{{ NumberToChinese(index + 1) }}次整改反馈</span>
        </div>
        <el-descriptions size="medium">
          <el-descriptions-item label="整改结果">{{ item.repairStatus ? repairStatusMap[item.repairStatus] : '' }}</el-descriptions-item>
          <el-descriptions-item label="整改时间">{{ item.operateDt ? moment(item.operateDt).format('YYYY-MM-DD HH:mm:ss') : '' }}</el-descriptions-item>
          <el-descriptions-item label="整改人">{{ item.createUser }}</el-descriptions-item>
          <el-descriptions-item label="整改备注">{{ item.remark }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <template v-if="type === 'info'">
        <el-button @click="visible = false">关闭</el-button>
        <el-button type="primary">打印</el-button>
      </template>
      <template v-if="type === 'examine'">
        <el-button type="primary" @click="examine(true)">合格</el-button>
        <el-button type="primary" @click="examine(false)">驳回</el-button>
      </template>
    </div>
  </el-dialog>
</template>

<script>
  import { gasCheckBillAudit, gasCheckQueryDetail, queryTraceRecord } from '@/api'
  import NumberToChinese from '@/utils/NumberToChinese'
  import moment from 'dayjs'
  import { imgBaseUrl } from '@/utils/config'

  const repairStatusMap = {
    1: '整改不合格/未整改',
    2: '已整改'
  }

  export default {
    name: 'SecurityCheckDetail',
    props: {
      warnLevelMap: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        repairStatusMap,
        moment,
        NumberToChinese,
        imgBaseUrl,
        visible: false,
        type: 'info',
        temp: {},
        detail: {
          billItemList: []
        },
        traceRecord: [] // 整改反馈
      }
    },
    computed: {
      tableData: function() {
        return this.detail.billItemList.filter(item => item.warnLevel > 0)
      },
      images: function() {
        return this.detail.imageName.split(';')
      }
    },
    methods: {
      open(temp, type) {
        this.getDetailData(temp)
        this.getTraceRecord(temp)
        return new Promise(resolve => {
          this.resolve = resolve
          this.visible = true
          this.temp = temp
          this.type = type
        })
      },
      async getDetailData(temp) {
        const res = await gasCheckQueryDetail({
          checkId: temp.checkId
        })
        this.detail = res.data
      },
      async getTraceRecord(temp) {
        const res = await queryTraceRecord({
          checkId: temp.checkId
        })
        this.traceRecord = res.data
      },
      async examine(val) {
        let checkStatus = 3
        if (val) {
          checkStatus = 2
        }
        await gasCheckBillAudit({
          checkIds: this.temp.checkId,
          checkStatus: checkStatus
        })
        this.visible = false
        this.resolve()
        this.$notify({
          title: '提示',
          message: '操作成功',
          type: 'success',
          duration: 2000
        })
      },
      getBillList(billItemList) {
        if (!billItemList) return []
        const billList = []
        billItemList.forEach(item => {
          let bill = billList.find(it => it.itemId === item.itemId)
          if (!bill) {
            bill = {
              ...item,
              subList: []
            }
            billList.push(bill)
          }
          // 单选型
          if (item.itemType === 1 && item.isChecked === 1) {
            bill.subList.push(item)
          }
          // 多选型
          if (item.itemType === 3 && item.isChecked === 1) {
            bill.subList.push(item)
          }
          // 普通
          if (item.itemType === 5) {
            bill.subList.push(item)
          }
        })
        return billList
      },
      getWarnLevelTip(warnLevel, warnLevels) {
        if (!warnLevel) return '无隐患'
        const the = warnLevels.find(item => item.keyVal === warnLevel)
        return the ? the.keyName : ''
      },
      reset() {
        this.temp = {}
        this.type = 'info'
        this.detail = {
          billItemList: []
        }
        this.traceRecord = []
      }
    }
  }
</script>

<style lang="scss" scoped>
.detail {
  .section {
    background: #fff;
    .tit {
      height: 40px;
      padding-left: 20px;
      line-height: 40px;
      color: #fff;
      background: #68b0c6;
    }
    ul {
      padding: 10px 20px;
    }
    .content {
      padding: 10px 0;
      margin: 0 20px;
      overflow: auto;
      background: #f5f5f5;
      p {
        padding: 6px 20px;
        line-height: 20px;
        i {
          margin: 0 10px;
        }
      }
    }
    .img {
      padding: 0 20px;
      margin-top: 20px;
      img {
        max-width: 500px;
        max-height: 300px;
      }
    }
    .table {
      margin: 20px 20px 0;
      table {
        min-width: 100%;
        tr:first-child {
          background: #f5f5f5;
        }
        th,
        td {
          padding: 5px 10px;
          border-bottom: 1px solid #f5f5f5;
          &:nth-of-type(1) {
            width: 15%;
            text-align: center;
          }
          &:nth-of-type(2) {
            width: 55%;
          }
          &:nth-of-type(3) {
            width: 30%;
            text-align: center;
          }
        }
      }
    }
  }
  .title {
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
    .title-icon {
      display: inline-block;
      width: 4px;
      height: 18px;
      margin-right: 6px;
      background: #01999f;
    }
    .title-text {
      font-family: Microsoft YaHei, Microsoft YaHei-Bold;
      font-size: 14px;
      font-weight: 700;
      color: #01999f;
    }
  }
}
</style>
